<template>
    <div>
        <el-dialog
                :title="isEdit ? '编辑' : '新增'"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
            <el-form v-if="!isEdit" label-position="left" :rules="formRules.departmentFrom" ref="departmentForm"
                     label-width="80px">
                <el-form-item label="小组名称">
                    <el-input v-model="groupName"/>
                </el-form-item>
                <el-form-item label="导师名称">
                    <template>
                        <el-select v-model="select1" placeholder="请选择导师">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.teachername"
                                    :value="item.teacherid">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="学生名称">
                    <template>
                        <el-select
                                v-model="select2"
                                multiple
                                collapse-tags
                                placeholder="请选择学生">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.studentname"
                                    :value="item.studentid">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <el-form v-else label-position="left" ref="departmentForm" label-width="80px">
                <el-form-item label="小组名称">
                    <el-input v-model="departmentData.groupName"/>
                </el-form-item>
                <el-form-item label="本组导师">
                    <el-tag>{{this.departmentData.teachername}}</el-tag>
                </el-form-item>
                <el-form-item label="导师名称">
                    <template>
                        <el-select v-model="select1" placeholder="请重新选择导师">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.teachername"
                                    :value="item.teacherid">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="本组学生">
                    <el-tag>{{this.departmentData.studentnames}}</el-tag>
                </el-form-item>
                <el-form-item label="学生名称">
                    <template>
                        <el-select
                                v-model="select2"
                                multiple
                                collapse-tags
                                placeholder="请重新选择学生">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.studentname"
                                    :value="item.studentid">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
    		<el-button type="primary" @click="onSubmit" v-loading="loading">确 定</el-button>
  		</span>
        </el-dialog>
    </div>
</template>

<script>
    import * as groupManage from '@/api/groupManage';

    export default {
        name: 'addDialog',
        props: {
            dialogVisible: {
                type: Boolean,
                default: false
            },
            isEdit: {
                type: Boolean
            },
            departmentData: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                loading: false,
                groupName: '',
                options1: [],
                options2: [],
                select1: '',
                select2: ''
            }
        },
        methods: {
            onSubmit() {
                if (this.isEdit) {
                    this.onEditGroup()
                } else {
                    this.onAddGroup();
                }
            },
            async onAddGroup() {
                try {
                    this.loading = true;
                    const req = {
                        groupname: this.groupName,
                        teacherid: this.select1,
                        studentids: this.select2.join(',')
                    }
                    await groupManage.addGroup(req);
                    this.handleFresh();
                    this.handleClose();
                } catch (e) {
                    this.$notify({
                        title: '错误',
                        type: 'error',
                        message: '添加失败!'
                    });
                    console.log(e)
                } finally {
                    this.loading = false;
                }
            },
            async onEditGroup() {
                try {
                    this.loading = true;
                    const req = {
                        groupid: this.departmentData.groupid,
                        groupname: this.departmentData.groupName,
                        teacherid: this.select1,
                        studentids: this.select2.join(',')
                    }
                    await groupManage.editGroup(req);
                    this.$notify({
                        title: '信息',
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.handleFresh();
                    this.handleClose();
                } catch (e) {
                    console.log(e);
                    this.$notify({
                        title: '错误',
                        type: 'error',
                        message: '修改失败!'
                    });
                } finally {
                    this.loading = false
                }
            },
            async getTeacherList() {
                const res = await groupManage.getTeacher({})
                this.options1 = res.msg
            },
            async getStudentList() {
                const res = await groupManage.getStudents({})
                this.options2 = res.msg
            },
            handleClose() {
                this.$emit('closeDialog');
            },
            handleFresh() {
                this.$emit('fresh');
            }
        },
        watch: {
            dialogVisible(newVal, oldVal) {
                if (newVal) {
                    if (!this.isEdit) {
                        this.majorForm = {
                            departmentid: '',
                            majorname: ''
                        }
                    }
                }
            }
        },
        created() {
            this.getTeacherList()
            this.getStudentList()
        }
    }
</script>

<style scoped>
</style>